<template>
  <div class="drawer">
    <el-drawer v-model="showDrawer" :title="props.data.chat_title || '暂无标题'" size="50%" :destroy-on-close="true" @close="close">
      <div class="layout">
        <ul class="scroll1 record" @scroll.stop="scroll">
          <li v-for="item in props.violationData" :key="item.id">
            <div class="center">
              <span>{{ item.created_at }}</span>
            </div>
            <div class="wrap-box" :class="{ active: item.msgid == props.msgid }">
              <!-- 文本 -->
              <template v-if="item.msgtype === 1">
                <div class="box_right" v-if="item.from_type == 1">
                  <div class="triangle_right"></div>
                  <div class="box2_right">
                    <span class="text1_right">{{ item.name || '机器人' }}</span>
                    <template v-if="item.text.length > 4 && item.text.match(/\[.+?\]/g)">
                      <span class="white_emoji">
                        <template v-for="(v, index) in item.text.match(/\[.+?\]/g)" :key="index">
                          <span>
                            <img :src="getEmojiUrl(v)" :alt="v" style="width: 20px; height: 20px; line-height: 20px" />
                          </span>
                        </template>
                      </span>
                    </template>
                    <img v-if="getEmojiUrl(item.text)" class="white_rights" :src="getEmojiUrl(item.text)" :alt="item.text" />
                    <div v-if="!getEmojiUrl(item.text) && !item.text.match(/\[.+?\]/g)" class="white_right"> {{ item.text }}</div>
                  </div>
                  <el-image class="img_right" :src="item.avatar">
                    <template #error>
                      <el-image src="/static/file/pic.png"></el-image>
                    </template>
                  </el-image>
                </div>
                <div class="box" v-else>
                  <div class="triangle"></div>
                  <img class="img" :src="item.avatar || '@/assets/logo.png'" />
                  <div class="box2">
                    <span class="text1">{{ item.name }}</span>
                    <!-- <div class="white"> {{ item.text }} </div> -->
                    <template v-if="item.text.length > 4 && item.text.match(/\[.+?\]/g)">
                      <span class="white_lemoji">
                        <template v-for="(v, index) in item.text.match(/\[.+?\]/g)" :key="index">
                          <span>
                            <img :src="getEmojiUrl(v)" :alt="v" style="width: 20px; height: 20px; line-height: 20px" />
                          </span>
                        </template>
                      </span>
                    </template>
                    <img v-if="getEmojiUrl(item.text)" class="whites" :src="getEmojiUrl(item.text)" :alt="item.text" />
                    <div v-if="!getEmojiUrl(item.text) && !item.text.match(/\[.+?\]/g)" class="white"> {{ item.text }}</div>
                  </div>
                </div>
              </template>
              <!-- 图片 -->
              <template v-if="item.msgtype === 2">
                <div class="picture_right" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <el-image :src="item.media_path" :previewSrcList="[item.media_path]" style="width: 150px; height: 150px"></el-image>
                      <!-- <img class="img1" :src="item.media_path" @click="lookPic(item)" /> -->
                    </div>
                    <img class="img_right" :src="item.avatar || '@/assets/logo.png'" />
                  </div>
                </div>
                <div class="picture" v-else>
                  <div class="box">
                    <img class="img" :src="item.avatar || '@/assets/logo.png'" />
                    <div class="box2">
                      <span class="text1">{{ item.name }}</span>
                      <el-image :src="item.media_path" :previewSrcList="[item.media_path]" style="width: 150px; height: 150px"></el-image>
                      <!-- <img class="img1" :src="item.media_path" @click="lookPic(item)" /> -->
                    </div>
                  </div>
                </div>
              </template>
              <!-- <audio autoplay src="/static/voice.mp3" controls> 您的浏览器不支持播放 </audio> -->
              <!-- 语音 -->
              <template v-if="item.msgtype === 5">
                <div class="voice_right" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="triangle_right"></div>
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <div class="voiceted_right" @click="palyAudio(item)">
                        <!-- item.media_path -->
                        <span>{{ JSON.parse(item.msgdata)?.play_length || 0 }}秒</span>
                        <audio ref="onaudio" class="audio_con_right" :class="'audio_box_' + item.id" :src="item.media_path" controls> 您的浏览器不支持播放 </audio>
                        <img src="@/assets/chatDetails/voice.png" style="width: 11px; height: 15px" />
                      </div>
                    </div>
                    <img class="img_right" :src="item.avatar || '@/assets/logo.png'" />
                  </div>
                </div>
                <div class="voice" v-else>
                  <div class="box">
                    <img class="img" :src="item.avatar || '@/assets/logo.png'" />
                    <div class="triangle"></div>
                    <div class="box2">
                      <span class="text1">{{ item.name }}</span>
                      <div class="voiceted" @click="palyAudio(item)">
                        <!-- item.media_path -->
                        <audio ref="onaudio" class="audio_con" :class="'audio_box_' + item.id" :src="item.media_path" controls> 您的浏览器不支持播放 </audio>
                        <img src="@/assets/chatDetails/voice.png" style="width: 11px; height: 15px" />
                        <span>{{ JSON.parse(item.msgdata)?.play_length || 0 }}秒</span>
                      </div>
                    </div>
                  </div>
                </div>
              </template>

              <!-- 视频 -->
              <template v-if="item.msgtype === 6">
                <div class="gif" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <div class="video_box_right" @click.prevent="playVideo(item)">
                        <div class="play_right"></div>
                        <el-image :src="getVideoImage(item.media_path, 140, 100)">
                          <template #error>
                            <el-image src="/static/file/mov.png"></el-image>
                          </template>
                        </el-image>
                      </div>
                    </div>
                    <img class="img_right" :src="item.avatar || '@/assets/logo.png'" />
                  </div>
                </div>
                <div class="gif" v-else>
                  <div class="box">
                    <img class="img" :src="item.avatar || '@/assets/logo.png'" />
                    <div class="box2">
                      <span class="text1">{{ item.name }}</span>
                      <div class="video_box" @click.prevent="playVideo(item)">
                        <div class="play"></div>
                        <el-image class="wel_content_file_item" :src="getVideoImage(item.media_path, 140, 100)">
                          <template #error>
                            <el-image src="/static/file/mov.png"></el-image>
                          </template>
                        </el-image>
                      </div>
                    </div>
                  </div>
                </div>
              </template>

              <!-- 文件txt -->
              <template v-if="item.msgtype === 10">
                <div class="txt_right" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <div class="texttxt_right" @click="lookFile(item)">
                        <div style="display: flex">
                          <div style="display: flex; flex-direction: column"
                            ><span>{{ JSON.parse(item.msgdata)?.filename }}</span
                            ><span style="margin-top: 10px">{{ (JSON.parse(item.msgdata)?.filesize / 1024 / 1024).toFixed(2) }}M</span></div
                          >
                          <img :src="getSuffixIcon(item.media_path)" style="width: 40px; height: 40px; margin-left: 40px" />
                        </div>
                      </div>
                    </div>
                    <img class="img_right" :src="item.avatar || '@/assets/logo.png'" /> <div class="triangle_right"></div>
                  </div>
                </div>
                <div class="txt" v-else>
                  <div class="box">
                    <img class="img" :src="item.avatar || '@/assets/logo.png'" /> <div class="triangle"></div>
                    <div class="box2">
                      <span class="text1">{{ item.name }}</span>
                      <div class="texttxt" @click="lookFile(item)">
                        <div style="display: flex">
                          <div style="display: flex; flex-direction: column"
                            ><span>{{ JSON.parse(item.msgdata)?.filename }}</span
                            ><span style="margin-top: 10px">{{ (JSON.parse(item.msgdata)?.filesize / 1024 / 1024).toFixed(2) }}M</span></div
                          >
                          <img :src="getSuffixIcon(item.media_path)" style="width: 40px; height: 40px; margin-left: 40px" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>

              <!-- 链接 -->
              <template v-if="item.msgtype === 11">
                <div class="link_right" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="triangle_right"></div>
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <div class="links_right" @click="lookLink(item)">
                        <div>
                          <div>{{ JSON.parse(item.msgdata)?.title }}</div>
                          <div style="display: flex; margin-top: 11px">
                            <div class="linkss_right">{{ JSON.parse(item.msgdata)?.link_url }}</div>
                            <img style="width: 50px; height: 50px" :src="JSON.parse(item.msgdata)?.image_url" />
                          </div>
                        </div>
                      </div>
                    </div>
                    <img class="img_right" :src="item.avatar || '@/assets/logo.png'" />
                  </div>
                </div>
                <div class="link" v-else>
                  <div class="box">
                    <img class="img" :src="item.avatar || '@/assets/logo.png'" />
                    <div class="triangle"></div>
                    <div class="box2">
                      <span class="text1">{{ item.name }}</span>
                      <div class="links" @click="lookLink(item)">
                        <div>
                          <div>{{ JSON.parse(item.msgdata)?.title }}</div>
                          <div style="display: flex; margin-top: 11px">
                            <div class="linkss">{{ JSON.parse(item.msgdata)?.link_url }}</div>
                            <img style="width: 50px; height: 50px" :src="JSON.parse(item.msgdata)?.image_url" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>

              <!-- 小程序消息 -->
              <template v-if="item.msgtype === 12">
                <div class="applet_right" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="triangle_right"></div>
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <div class="applets_right">
                        <div style="margin-left: 18px">
                          <div style="margin-top: 11px">
                            <img class="app-img_right" src="@/assets/chatDetails/Appletbg.png" />
                            <span class="app-title_right">{{ JSON.parse(item.msgdata)?.title }}</span>
                          </div>
                          <div style="margin: 8px 0 11px">{{ JSON.parse(item.msgdata)?.description }}</div>
                          <img src="@/assets/chatDetails/appletcurrency.png" />
                          <div class="app_line_right"></div>
                          <img class="app_simg_right" src="@/assets/chatDetails/Applet.png" />
                          <span class="app-text_right">小程序</span>
                        </div>
                      </div>
                    </div>
                    <img class="img_right" :src="item.avatar || '@/assets/logo.png'" />
                  </div>
                </div>
                <div class="applet" v-else>
                  <div class="box">
                    <img class="img" :src="item.avatar || '@/assets/logo.png'" />
                    <div class="triangle"></div>
                    <div class="box2">
                      <span class="text1">{{ item.name }}</span>
                      <div class="applets">
                        <div style="margin-left: 18px">
                          <div style="margin-top: 11px">
                            <img class="app-img" src="@/assets/chatDetails/Appletbg.png" />
                            <span class="app-title">{{ JSON.parse(item.msgdata)?.title }}</span>
                          </div>
                          <div style="margin: 8px 0 11px">{{ JSON.parse(item.msgdata)?.description }}</div>
                          <img src="@/assets/chatDetails/appletcurrency.png" />
                          <div class="app_line"></div>
                          <img class="app_simg" src="@/assets/chatDetails/Applet.png" />
                          <span class="app-text">小程序</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>

              <!-- 红包 -->
              <template v-if="item.msgtype === 19">
                <div class="noredenvelopes_right" v-if="item.from_type == 1">
                  <div class="box_right">
                    <div class="box2_right">
                      <span class="text1_right">{{ item.name }}</span>
                      <div class="noenvelopes_right">
                        <div class="noenvelopes-layout_right">
                          <img style="width: 40px; height: 40px" src="@/assets/chatDetails/yredenvelopes.png" />
                          <div class="spot_right">{{ item.text }}</div>
                        </div>
                        <div style="margin: 0 20px">
                          <div class="noenvelopes-line_right"></div>
                          <div class="noenvelopes-text_right">红包</div>
                        </div>
                      </div>
                    </div>
                    <img class="img_right" :src="item.avatar || '@/assets/logo.png'" /> <div class="redtriangle_right"></div>
                  </div>
                </div>
                <div class="noredenvelopes" v-else>
                  <div class="box">
                    <img class="img" :src="item.avatar || '@/assets/logo.png'" /> <div class="redtriangle"></div>
                    <div class="box2">
                      <span class="text1">{{ item.name }}</span>
                      <div class="noenvelopes">
                        <div class="noenvelopes-layout">
                          <img style="width: 40px; height: 40px" src="@/assets/chatDetails/yredenvelopes.png" />
                          <div class="spot">{{ item.text }}</div>
                        </div>
                        <div style="margin: 0 20px">
                          <div class="noenvelopes-line"></div>
                          <div class="noenvelopes-text">红包</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </li>
        </ul>
        <Videowicket ref="videoWicketRef" />
        <!-- 预览 -->
        <el-dialog v-model="dialogVisible" :title="dialogTitle" :width="dialogWidth" center>
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </div>
      <template #footer v-if="props.data.status == 2">
        <el-button type="primary" @click="normal">标记为正常</el-button>
      </template>
    </el-drawer>
  </div>
</template>
<script setup lang="ts">
  import { qrcanvas } from 'qrcanvas'
  import Videowicket from '../../messagearchiving/components/videoWicket.vue'
  import { playTime, getVideoImage, getSuffixIcon } from '@/utils/utils'
  import { reactive, ref, onMounted, inject, watch } from 'vue'
  import { ElMessage } from 'element-plus'
  import { getEmojiUrl } from '@/utils/emoji'
  import { getViolationContext, getViolationGroupContext, signNormal, getViolationChat, getViolationGroupChat } from '@/api/employe/riskmonitoring/violationMonitoring'
  const showDrawer = ref(false)
  const videoWicketRef = ref(null)
  const dialogImageUrl = ref('')
  const dialogTitle = ref('图片预览')
  const dialogWidth = ref('')
  const dialogVisible = ref(false)
  const emit = defineEmits(['normal'])
  const props = defineProps(['violationData', 'ltType', 'msgid', 'staff_id', 'roomid', 'data', 'violationChat', 'wx_userid'])

  // 视频播放
  const playVideo = (item: any) => {
    console.log('视频播放', item.media_path)
    videoWicketRef.value.videoCheck = true
    videoWicketRef.value.video_url = item.media_path
    videoWicketRef.value.getTime()
  }
  // 播放语音
  const palyAudio = (item: any) => {
    let dom = document.querySelector('.audio_box_' + item.id)

    // console.log('onaudio', onaudio)
    console.log(item.id)
    if (dom.paused) {
      console.log('pause')
      dom.play()
    } else {
      console.log('play')
      dom.pause()
    }
  }
  // 文件
  const lookFile = (item: any) => {
    window.open(item.media_path)
  }
  // 生成二维码
  const lookLink = (data: any) => {
    const item = JSON.parse(data.msgdata)
    const src = creatQrCode(item.link_url)
    dialogVisible.value = true
    dialogImageUrl.value = src!
    dialogTitle.value = '查看链接'
    dialogWidth.value = '350px'
    // console.log(item, '====lianjie', src)
  }
  // 查看图片
  const lookPic = (data: any) => {
    dialogVisible.value = true
    dialogImageUrl.value = data.media_path
    dialogTitle.value = '查看图片'
    // dialogWidth.value = String(JSON.parse(data.msgdata)?.filesize / 150) + 'px'
  }
  const creatQrCode = (data: any) => {
    return qrcanvas({
      data,
      size: 100
    }).toDataURL('image/png')
  }
  let violationChat = inject('violationChat')
  // 删除
  const groupPeopleId = props.data.id
  // 标记正常
  const normal = async () => {
    const id = props.data.id
    let params = {
      id
    }
    await signNormal(params)
    const index = props.violationChat.findIndex((v: any) => v.id === groupPeopleId)
    props.violationChat.splice(index, 1)
    showDrawer.value = false
    if (props.ltType == 0) {
      let violationPersonnel = {
        wx_userid: props.wx_userid,
        created_at: [],
        violation_type: '', //违规类型 1-敏感词 2--图片 3-链接 4-小程序 5-名片 6-红包 7-音频 8-视频
        page: 1,
        page_size: 10
      }
      getViolationChat(violationPersonnel).then(({ data }: any) => {
        emit('updateData', data)
      })
    }

    ElMessage({
      message: '操作成功',
      type: 'success'
    })
  }
  const paged = ref(1)
  const pageg = ref(1)
  let start = ref(true)
  // const scroll = async () => {
  //   const el = document.querySelector('.scroll1')
  //   const clientHeight = el?.clientHeight
  //   const scrollHeight = el?.scrollHeight
  //   const scrollTop = Math.ceil(el?.scrollTop)
  //   console.log(scrollHeight, clientHeight)
  //   console.log(scrollTop)
  //   console.dir(el)
  //   if (scrollTop >= scrollHeight - clientHeight) {
  //     if (!start.value) return
  //     if (props.ltType == 0) {
  //       let params = {
  //         msgid: props.msgid,
  //         page: ++paged.value,
  //         page_size: 10
  //       }
  //       const { data } = await getViolationContext(params)
  //       console.log('data', data)
  //       if (data.length === 0) {
  //         start.value = false
  //         return console.log('没有数据了')
  //       }
  //       props.violationData.push(...data)
  //     } else {
  //       let params = {
  //         roomid: props.roomid,
  //         staff_id: props.staff_id,
  //         page: ++pageg.value,
  //         page_size: 10
  //       }
  //       getViolationGroupContext(params).then(({ data }: any) => {
  //         console.log('data', data)
  //         if (data.length === 0) {
  //           start.value = false
  //           return console.log('没有数据了')
  //         }
  //         props.violationData.push(...data)
  //       })
  //     }
  //     start.value = true
  //   }
  // }
  // 关闭的时候将页码重置
  const close = () => {
    pageg.value = 1
    paged.value = 1
  }
  const normals = inject('normal')
  defineExpose({
    showDrawer,
    start
  })
  watch(showDrawer, (val) => {
    if (val) {
      setTimeout(() => {
        document.querySelector('.wrap-box.active').scrollIntoView({
          behavior: 'smooth'
        })
      }, 300)
    }
  })
</script>
<style>
  .drawer .el-drawer {
    background-color: #f9f9f9;
  }
</style>
<style lang="scss" scoped>
  .wrap-box.active .white_right {
    color: #f9624b !important;
  }
  .wrap-box.active .white {
    color: #f9624b !important;
  }
  :deep .drawer {
    background-color: #f9f9f9;
  }
  .layout {
    // position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    .el-dialog--center .el-dialog__body img {
      width: 300px;
      height: 300px;
    }
    .record {
      padding: 10px 30px 0;
      margin-top: 16px;
      .center span {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 30px;
        font-size: 13px;
        color: #969696;
      }
      .box_right {
        display: flex;
        position: relative;
        justify-content: flex-end;
        .triangle_right {
          width: 0;
          height: 0;
          border-left: 6px solid #ffffff;
          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;
          position: absolute;
          right: 46px;
          top: 23px;
        }
        .redtriangle_right {
          width: 0;
          height: 0;
          border-left: 6px solid #f9624b;
          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;
          position: absolute;
          right: 46px;
          top: 23px;
        }
        .img_right {
          width: 40px;
          height: 40px;
          margin-left: 7px;
          border-radius: 4px;
        }
        .box2_right {
          display: flex;
          flex-direction: column;
          margin-right: 5px;
          .text1_right {
            color: #969696;
            font-size: 12px;
            margin-bottom: 3px;
            text-align: right;
          }
          .video_box_right {
            position: relative;
            width: 140px;
            height: 100px;
            cursor: pointer;
            .play_right {
              width: 25px;
              height: 25px;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              background: url('@/assets/image/material/play.png') no-repeat;
              background-size: cover;
              z-index: 1;
            }
          }
          .white_right {
            background-color: #fff;
            color: #000000;
            max-width: 300px;
            word-break: break-all;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 16px;
            line-height: 20px;
            font-family: STHeitiSC-Medium, STHeitiSC;
            font-weight: 500;
            text-align: right;
            // display: inline-flex;
          }
          .white_rights {
            background-color: #fff;
            color: #000000;
            max-width: 300px;
            word-break: break-all;
            display: inline-flex;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 16px;
            line-height: 20px;
            font-family: STHeitiSC-Medium, STHeitiSC;
            font-weight: 500;
            width: 20px;
            height: 20px;
          }
          .white_emoji {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;
            padding: 6px 12px;
            border-radius: 6px;
          }
        }
      }
      .box {
        display: flex;
        position: relative;
        .img {
          width: 40px;
          height: 40px;
          margin-right: 7px;
          border-radius: 4px;
        }
        .triangle {
          width: 0;
          height: 0;
          border-right: 6px solid #ffffff;
          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;
          position: absolute;
          left: 46px;
          top: 23px;
        }

        .redtriangle {
          width: 0;
          height: 0;
          border-right: 6px solid #f9624b;
          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;
          position: absolute;
          left: 46px;
          top: 23px;
        }

        .box2 {
          display: flex;
          flex-direction: column;
          margin-left: 5px;
          .video_box {
            position: relative;
            width: 140px;
            height: 100px;
            cursor: pointer;

            .play {
              width: 25px;
              height: 25px;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              background: url('@/assets/image/material/play.png') no-repeat;
              background-size: cover;
              z-index: 1;
            }
          }

          .text1 {
            color: #969696;
            font-size: 12px;
            margin-bottom: 3px;
          }
          .white {
            text-align: left;
            background-color: #fff;
            color: #000000;
            max-width: 300px;
            word-break: break-all;
            display: inline-flex;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 16px;
            line-height: 20px;
            font-family: STHeitiSC-Medium, STHeitiSC;
            font-weight: 500;
          }
          .whites {
            text-align: left;
            background-color: #fff;
            color: #000000;
            max-width: 300px;
            word-break: break-all;
            display: inline-flex;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 16px;
            line-height: 20px;
            font-family: STHeitiSC-Medium, STHeitiSC;
            font-weight: 500;
            width: 20px;
            height: 20px;
          }
          .white_lemoji {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;
            padding: 6px 12px;
            border-radius: 6px;
          }
        }
      }
      .picture {
        position: relative;
      }
      .gif {
        position: relative;
        .gifimg {
          width: 113.4px;
          height: 77px;
        }
      }
      .businesscard {
        position: relative;
        .text1 {
          color: #969696;
          font-size: 12px;
          margin-bottom: 3px;
          margin-left: 4px;
        }
        .box3 {
          width: 186px;
          height: 99px;
          margin-left: 4px;
          background-color: #ffffff;
          display: flex;
          flex-direction: column;
          padding: 11px 0 0 18px;
          .text2 {
            font-size: 16px;
            color: #000000;
            margin-bottom: 10px;
          }
          .card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 120px;
            height: 52px;
            border: 1px solid #eaeaea;
            padding: 0 13px;
          }
        }
      }
      .discerntext {
        margin-top: 18px;
        position: relative;
        .discern {
          width: 163px;
          height: 38px;
          background-color: #ffffff;
          line-height: 38px;
          text-align: center;
        }
      }
      .notconnected {
        margin-top: 18px;
        position: relative;
        .nconnected {
          width: 120px;
          height: 38px;
          background-color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 17px;
        }
      }
      .fconnected {
        margin-top: 18px;
        position: relative;
        .connected {
          width: 155px;
          height: 38px;
          background-color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 15px;
        }
      }
      .cancelvideo {
        margin-top: 18px;
        position: relative;
        .cancel {
          width: 98px;
          height: 38px;
          background-color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 15px;
        }
      }
      .voice {
        margin-top: 18px;
        position: relative;
        .voiceted {
          width: 100px;
          height: 38px;
          background-color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 15px;
          position: relative;
          cursor: pointer;
          .audio_con {
            position: absolute;
            left: 5px;
            top: 4px;
            width: 250px;
            height: 30px;
            z-index: -1;
            opacity: 0;
          }
        }
      }
      .voice_right {
        margin-top: 18px;
        position: relative;
        .voiceted_right {
          width: 100px;
          height: 38px;
          background-color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 15px;
          position: relative;
          cursor: pointer;
          .audio_con_right {
            position: absolute;
            left: 5px;
            top: 4px;
            width: 250px;
            height: 30px;
            z-index: -1;
            opacity: 0;
          }
        }
      }
      .txt {
        margin-top: 18px;
        position: relative;
        .texttxt {
          // width: 210px;
          // height: 50px;
          background-color: #ffffff;
          padding: 10px 14px;
          line-height: 15px;
          max-width: 230px;
          word-break: break-all;
          display: inline-flex;
          border-radius: 6px;
        }
      }
      .txt_right {
        margin-top: 18px;
        position: relative;
        .texttxt_right {
          // width: 210px;
          // height: 50px;
          background-color: #ffffff;
          padding: 10px 14px;
          line-height: 15px;
          max-width: 230px;
          word-break: break-all;
          display: inline-flex;
          border-radius: 6px;
        }
      }
      .red {
        margin-top: 18px;
        position: relative;
        .nored {
          width: 270px;
          height: 110px;
          background-color: #ffffff;
          padding: 0 14px;
        }
      }
      .mixedmessage {
        margin-top: 18px;
        position: relative;
        .message {
          width: 270px;
          height: 147px;
          background-color: #ffffff;

          .bg {
            width: 243px;
            height: 99px;
            border: 1px solid #f3f3f3;
            background-color: #fff4ef;
            text-align: center;
            line-height: 99px;
          }
        }
      }
      .groupchat {
        margin-top: 18px;
        position: relative;
        .chat {
          width: 240px;
          height: 106px;
          background-color: #ffffff;
        }
      }
      .schedule {
        margin-top: 19px;
        width: 378px;
        height: 162px;
        background-color: #ffffff;
        overflow: hidden;
        vertical-align: middle;
        position: relative;
        .radius {
          display: inline-block;
          width: 2px;
          height: 2px;
          background-color: #979797;
          border-radius: 50%;
          margin-right: 10px;
        }
      }
      .mycard {
        margin-top: 18px;
        position: relative;
        .personal {
          width: 230px;
          height: 105px;
          background-color: #ffffff;
        }
      }
      .noredenvelopes {
        margin-top: 18px;
        position: relative;
        .noenvelopes {
          width: 260px;
          height: 89px;
          background-color: #f9624b;
          .noenvelopes-layout {
            display: flex;
            margin: 12px 0 0 15px;
          }
          .spot {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #fff0ce;
            line-height: 40px;
          }
          .noenvelopes-line {
            border-bottom: 1px solid #fa8978;
            margin: 7px 0;
          }
          .noenvelopes-text {
            color: #ffebeb;
            font-size: 12px;
          }
        }
      }
      .noredenvelopes_right {
        margin-top: 18px;
        position: relative;
        .noenvelopes_right {
          width: 260px;
          height: 89px;
          background-color: #f9624b;
          .noenvelopes-layout_right {
            display: flex;
            margin: 12px 0 0 15px;
          }
          .spot_right {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #fff0ce;
            line-height: 40px;
          }
          .noenvelopes-line_right {
            border-bottom: 1px solid #fa8978;
            margin: 7px 0;
          }
          .noenvelopes-text_right {
            color: #ffebeb;
            font-size: 12px;
          }
        }
      }
      .redenvelopes {
        margin-top: 18px;
        position: relative;
        .envelopes {
          width: 260px;
          height: 89px;
          background-color: #faab9f;
          .spot {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #fff0ce;
            line-height: 40px;
          }
        }
      }

      .link {
        margin-top: 18px;
        position: relative;
        .links {
          background-color: #ffffff;
          cursor: pointer;
          border-radius: 6px;
          padding: 10px 14px;

          .linkss {
            max-width: 180px;
            word-break: break-all;
            color: #969696;
            font-size: 12px;
          }
        }
      }
      .link_right {
        margin-top: 18px;
        position: relative;
        .links_right {
          background-color: #ffffff;
          cursor: pointer;
          border-radius: 6px;
          padding: 10px 14px;

          .linkss_right {
            max-width: 180px;
            word-break: break-all;
            color: #969696;
            font-size: 12px;
          }
        }
      }
    }
    .button {
      height: 45px;
      border-top: 1px solid #eaeaea;
      width: 100%;
      background-color: #f6f6f6;
      // text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .scroll1 {
      // height: 624px;
      height: calc(100vh - 128px);
      overflow: scroll;
      // height: calc(74% - 36px);
      // overflow-y: scroll;
    }
    .apply {
      margin-top: 18px;
      position: relative;
      .applys {
        width: 270px;
        height: 106px;
        background-color: #ffffff;
      }
    }
    .applet {
      margin-top: 18px;
      position: relative;
      .applets {
        width: 260px;
        height: 283px;
        background-color: #ffffff;
        .app-img {
          width: 21px;
          height: 20px;
          vertical-align: middle;
        }
        .app-title {
          color: #969696;
          font-size: 12px;
          margin-left: 8px;
        }
        .app_line {
          border-bottom: 1px solid #eaeaea;
          margin: 7px 0;
        }
        .app_simg {
          vertical-align: middle;
          margin-right: 4px;
        }
        .app-text {
          color: #969696;
          font-size: 12px;
        }
      }
    }
    .applet_right {
      margin-top: 18px;
      position: relative;
      .applets_right {
        width: 260px;
        height: 283px;
        background-color: #ffffff;
        .app-img_right {
          width: 21px;
          height: 20px;
          vertical-align: middle;
        }
        .app-title_right {
          color: #969696;
          font-size: 12px;
          margin-left: 8px;
        }
        .app_line_right {
          border-bottom: 1px solid #eaeaea;
          margin: 7px 0;
        }
        .app_simg_right {
          vertical-align: middle;
          margin-right: 4px;
        }
        .app-text_right {
          color: #969696;
          font-size: 12px;
        }
      }
    }
  }
</style>
